<template>
  <div class="infinite-container" id="drugReminderIndex">
    <float-btn :iconSize="60" :iconUrl="floatBtnIcon"  :clickEvent="true" @go="openBottomSheet = true"></float-btn>
    <div class="noDrug" v-if="isNoDrug">
      <div class="drugIcon">
        <img src="../../assets/images/img_default_yytx.png" alt />
        <p>尚未添加用药计划</p>
        <button
          class="handlerBtn handlerBtnHollow mt10"
          style="width:160px;"
          @click="openBottomSheet = true"
        >添加用药提醒</button>
      </div>
    </div>

    <div v-else class="listContainer">
      <div
        v-for="(value, index) in planList"
        :key="index"
        class="mb10"
        @click="go('/drugReminder/addDrug', value)"
      >
        <slide-delete
          :itemId="value.reminderId"
          :index="index"
          @moveEnd="moveEnd"
          @removeClick="removeReminder"
          :ref="'removeComponent' + index"
        >
          <div>
            <div class="pd10 drugInfo">
              <h4 class="maxlen">{{value.drugName}}</h4>
              <div class="flex flex_between">
                <p>
                  <span>{{value.rateName}} </span>
                  <span>{{value.takeWay}} </span>
                  <span class="textPrimary">{{value.dosage}}</span>
                </p>
                <p>
                  <span>{{value.startTime}}</span>至<span>{{value.endTime}}</span>
                </p>
              </div>
            </div>
            <div class="flex flex_between flex_vcenter pd10">
              <div class="flex flex_vcenter">
                <img src="../../assets/wzjl/icon_zxwz_jzr.png" alt class="userIcon" />
                <span>{{value.userName}}</span>
              </div>
              <div>
                <span>提醒时间:</span>
                <span>{{value.drugId | safeSlice(17)}}</span>
              </div>
            </div>
          </div>
        </slide-delete>
      </div>
    </div>
    <mu-dialog :open="dialogConfirmDelete" title="温馨提示">
      确认要删除该条用药提醒吗
      <mu-raised-button slot="actions" @click="confirmDelete()" primary label="确认" />
      <mu-raised-button slot="actions" @click="closeDialog()" secondary label="取消" />
    </mu-dialog>
    <mu-bottom-sheet :open="openBottomSheet" @close="openBottomSheet = false">
      <mu-list>
        <mu-list-item class="text-center" title="本院处方" to="/drugReminder/importPrescription"></mu-list-item>
        <mu-divider/>
        <mu-list-item class="text-center" title="院外药品" to="/drugReminder/addDrug"></mu-list-item>
        <mu-divider/>
        <mu-list-item class="text-center" @click="openBottomSheet = false">取消</mu-list-item>
      </mu-list>
    </mu-bottom-sheet>
  </div>
</template>

<script>
import floatBtn from "../../components/BsFloatBtn.vue";
import floatBtnIcon from "../../assets/images/img_float-btn_add.png";
import slideDelete from "../../components/BsSlideDelete.vue";
import { commonAjaxJson, RESTFUL_API } from "../../api/api";
// const WEEKS = ["", "周日", "周一", "周二", "周三", "周四", "周五", "周六"]
export default {
  data() {
    return {
      hospitalCode: sessionStorage.getItem("hospitalCode") || "",
      floatBtnIcon: floatBtnIcon,
      isNoDrug: true,
      planList: [],
      dialogConfirmDelete: false,
      itemId: "",
      currentIndex: "",
      openBottomSheet: false
    };
  },
  components: { floatBtn, slideDelete },
  mounted() {
    this.queryReminderList();
  },
  methods: {
    closeDialog() {
      this.dialogConfirmDelete = false;
    },
    go(url, value) {
      if (value) {
        this.$router.push({
          path: url,
          query: {
            reminderItem: JSON.stringify(value)
          }
        });
      } else {
        this.$router.push(url);
      }
    },
    removeReminder(val) {
      this.itemId = val.itemId;
      this.currentIndex = val.index;
      this.dialogConfirmDelete = true;
      
    },
    moveEnd(val) {
      this.planList.forEach((item, index) => {
        if(val.index != index ) {
          this.$refs["removeComponent" + index][0]["_data"].deleteSlider = "transform:translateX(0px)";
        }
      })
    },
    confirmDelete() {
      let param = {
        reminderId: this.itemId
      };
      this.$refs["removeComponent" + this.currentIndex][0][
        "_data"
      ].deleteSlider = "transform:translateX(0px)";
      
      commonAjaxJson(RESTFUL_API.removeReminder, param, true).then(res => {
        
        if (res.data.code == 200) {
          this.$store.commit("UPDATE_TOAST", {
            message: "删除成功",
            fn: () => {
              this.dialogConfirmDelete = false;
              this.queryReminderList();
            }
          });
        } else {
          this.$store.commit("UPDATE_TOAST", {
            message: res.data.message
          });
        }
      });
    },
    queryReminderList() {
      // reminderList
      let param = {
        hospitalCode: this.hospitalCode,
        pageNo: 1,
        pageSize: 100
      };
      
      commonAjaxJson(RESTFUL_API.reminderList, param, true)
        .then(res => {
          
          if (res.data.code == 200) {
            if (res.data.data.length == 0) {
              this.isNoDrug = true;
            } else {
              res.data.data.forEach((val,index) => {
                val.reminderTimeArr = val.drugId.split(",")
                if(val.cycle > 1) {
                  let reminderTime = val.drugId.split(",")
                  reminderTime.forEach((v, i) => {
                    // v = WEEKS[v.split("#")[0]] + v.split("#")[1]
                    // v = `第${v.split("#")[0]}日 ${v.split("#")[1]}`
                    v = v.split("#")[1]
                    reminderTime[i] = v
                  })
                  val.drugId = reminderTime.join(",");
                }
              })
              this.planList = res.data.data;
              this.isNoDrug = false;
            }
          }
        })
        
    }
  }
};
</script>

<style scoped lang="less">
@import "../../common/css/component";
.maxlen {
  white-space: nowrap;
}
.noDrug {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  background-color: white;
  bottom: 0;
}
.drugIcon {
  display: block;
  width: 50%;
  margin: 0 auto;
  margin-top: 60%;
  transform: translateY(-50%);
  text-align: center;
}
.userIcon {
  width: 20px;
  vertical-align: bottom;
  margin-right: 10px;
}
.drugInfo {
  border-bottom: 1px solid @color-border;
}
.listContainer {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 100%;
  overflow-y: scroll;
}
</style>
